<template>
    <div id="management">
        <!-- 侧边栏 -->
        <aside>
            <!-- 标题 -->
            <div class="title">
                <img src="@/assets/logo.png" alt="logo">
                <transition>
                    <h3 v-show="!isAsideMenuCollapse">资源管理系统</h3>
                </transition>
            </div>
            <!-- 菜单 -->
            <el-menu :default-active="$route.fullPath" class="el-menu-vertical" :collapse="isAsideMenuCollapse"
                :collapse-transition="true" router>
                <!-- home -->
                <el-menu-item index="/welcome">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title" style="margin-left: 15px;">Home</span>
                </el-menu-item>
                <!-- 递归组件 -->
                <AsideMenu :userMenu="userMenu" v-for="userMenu in userMenuList" />
            </el-menu>
        </aside>

        <!-- 右侧内容 -->
        <div class="container">
            <!-- 顶部 -->
            <header>
                <HeaderNav />
            </header>

            <!-- 内容 -->
            <main>
                <router-view></router-view>
            </main>
        </div>
    </div>
</template>

<script>
// 引入组件
import AsideMenu from "@/components/asideMenu_digui.vue";
import HeaderNav from "@/components/headerNav.vue";

// 引入vuex
import { mapState } from "vuex";

export default {
    name: 'Management',
    components: {
        AsideMenu,
        HeaderNav,
    },
    data() {
        return {

        };
    },
    computed: {
        ...mapState(['isAsideMenuCollapse', 'userMenuList']),
    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
// .v-enter,
// .v-leave-to {
//     opacity: 0;
// }

// .v-enter-to,
// .v-leave {
//     opacity: 1;
// }

// .v-enter-active,
// .v-leave-active {
//     position: absolute;
//     opacity: 0;
// }

// .v-enter-active {
//     transition: all 0.3s;
// }

// ** 侧边栏样式
.el-menu-vertical {
    // 隐藏右边框
    border-right: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
    // 侧边栏的宽度
    width: 240px;
    min-height: 400px;
}

// ** /侧边栏样式

#management {
    background-color: #f5f5f5;
    width: 100vw;
    height: 100vh;
    display: flex;

    // 侧边栏
    aside {
        // width: 240px;
        width: fit-content;
        height: 100%;
        background-color: #fff;
        margin-right: 15px;
        overflow-x: hidden;
        overflow-y: auto;

        &::-webkit-scrollbar {
            // 改变滚动条宽度
            width: 6px;
            // height: 4px;
        }

        &::-webkit-scrollbar-thumb {
            // 滚动块样式
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: transparent;
            border: 1px solid rgba(#fff, 0.4);
        }

        &::-webkit-scrollbar-track {
            // 轨道样式
            border-radius: 0;
            background: transparent;
        }

        // 标题
        .title {
            position: relative;
            padding: 25px 0px 20px 20px;
            display: flex;
            align-items: center;

            img {
                width: 25px;
                height: 25px;
                object-fit: cover;
            }

            h3 {
                color: #409eff;
                margin-left: 15px;
            }
        }
    }

    // 右侧内容
    .container {
        flex: 1;
        width: 100%;
        // height: 100%;
        padding-right: 15px;
        display: flex;
        flex-direction: column;

        header {
            padding-top: 5px;
            margin-bottom: 15px;
        }

        main {
            flex: 1;
            overflow-y: auto;

            &::-webkit-scrollbar {
                // 改变滚动条宽度
                width: 6px;
                // height: 4px;
            }

            &::-webkit-scrollbar-thumb {
                // 滚动块样式
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: transparent;
                border: 1px solid rgba(#fff, 0.4);
            }

            &::-webkit-scrollbar-track {
                // 轨道样式
                border-radius: 0;
                background: transparent;
            }

        }
    }

}
</style>